<template>
    <div ref="containerRef" class="screen-center">
        <component
            :is="item.component"
            v-for="item in components"
            :key="item.name"
            :class="item.className"
            :name="item.name"
        >
        </component>
    </div>
</template>

<script setup lang="ts">
    import { shallowRef } from 'vue';
    import { useSortable } from '@/hooks/useSortable';

    import Center1 from './center1.vue';
    import Center2 from './center2.vue';
    import Center4 from './center4.vue';

    const components = shallowRef([
        {
            name: 'center1',
            component: Center1,
            className: 'screen-center-item0',
        },
        {
            name: 'center2',
            component: Center2,
            className: 'screen-center-item1',
        },
        {
            name: 'center4',
            component: Center4,
            className: 'screen-center-item2',
        },
    ]);

    const { containerRef } = useSortable(components);
</script>

<style lang="less">
    .screen-center {
        width: 100%;
        height: 100%;

        .screen-center-item0 {
            width: 100%;
            height: 15%;
            // background-color: var(--es-block-bg);
            padding: 16px;
            animation-name: slide;
        }

        .screen-center-item1 {
            width: 100%;
            height: 40%;
            // background-color: var(--es-block-bg);
            padding: 16px;
            animation-name: slide;
        }

        .screen-center-item2 {
            width: 100%;
            height: 35%;
            // background-color: var(--es-block-bg);
            padding: 16px;
            animation-name: slide;

            & + & {
                margin-top: 20px;
            }
        }
    }
</style>
